<template>
    <div class="chart"></div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        props: {
            chartData: {
                type: Object,
            },
        },
        data() {
            return {
                chart: null,
                id: 'barChart',
            }
        },
        watch: {
            chartData() {
                this.setOptions()
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el)
                window.onresize=this.chart.resize
                this.setOptions()
            },
            setOptions() {
                let dataObj = this.chartData
                let option = {
                    color: dataObj.color,
                    title: {
                        text: dataObj.title,
                        left: '2%',
                        top: '5%',
                        textStyle: {
                            color: '#000',
                            fontSize: '0.22rem',
                        },
                    },
                    grid: {
                        bottom: '15%',
                        top: '20%',
                        left: '14%',
                        right: '7%',
                        // containLabel: false,
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                        },
                    ],
                    legend: {
                        // top: '5%',
                        // left: '25%',
                        right:' 2%',
                        itemWidth: 15 ,
                        itemHeight: 15,
                    },
                    tooltip: {
                        trigger: 'axis',
                        // formatter: function (params, ticket, callback) {
                        //     console.log(params)
                        //     let str = '';
                        //     str += '时间：'+ params[0]['name'];
                        //     for (let i in params) {
                        //         str += '\n';
                        //         str += '{marker' + i + 'at0|} ';
                        //         str += params[i]['seriesName'];
                        //         str += '：'
                        //         str += params[i]['value'];
                        //     }
                        //     return str;
                        // },
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        splitNumber: 7,
                        data: dataObj.week,
                        splitLine:{show: false},
                        axisLine: {
                            lineStyle:{
                                color : '#24a8ac'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color:  '#000' , //坐标值得具体的颜色
                                // fontSize: '0.12rem',
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        // type: 'value',
                        // splitNumber: dataObj.echartInterval,
                        splitLine:{show: false},
                        axisLine: {
                            lineStyle:{
                                color : '#24a8ac'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color:  '#000' , //坐标值得具体的颜色
                                // fontSize: '0.12rem',
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    series: dataObj.seriesData,
                }
                this.chart.clear()
                this.chart.setOption(option)
            },
        },
    }
</script>

<style lang="stylus" scoped>
    .chart
        margin 0.2rem 0.3rem
        height: 4.5rem;
        background-color: #fff;
        box-shadow: 0.04rem 0.04rem 0.1rem  rgba(0, 0, 0, 0.2);
        border-radius: 0.1rem;


</style>
